<!-- *@description:  -->
<!-- *@Author: Platina -->
<!-- *@Date: 2025-07-11 10:20:01 -->
<template>
  <div class="Equipment">
    <div class="EquipmentTitle">
      <div class="backG"></div>
      <div class="fwb zindex999 mr47">巡检任务</div>
    </div>
    <div class="EquipmentContent">
      <div class="eventBox">
        <div class="imgBox">
          <div class="imgText f12">正在执行任务中</div>
          <img src="/EquipmentResources/rightImg.svg">
        </div>
        <div class="mainBox">
          <div class="commentBox">
            <div class="commentTop">
              <div class="commentLeft flexCenter">
                <div class="backG"></div>
                <div class="w100 h100 f18 zindex999">&nbsp;&nbsp;<span class="shenglue">嘉禾林区巡检</span>
                </div>
              </div>
            </div>
            <div class="commentMiddle">
              <div class="middleComment f14"><span>总里程：7903米</span> </div>
              <div class="middleComment f14"><span>开始时间：2025-07-11 18:09:31</span> </div>
            </div>
          </div>
        </div>
      </div>
      <div class="eventBox">
        <div class="imgBox">
          <div class="imgText f12">已完成任务</div>
          <img src="/EquipmentResources/rightImg.svg">
        </div>
        <div class="mainBox">
          <div class="commentBox">
            <div class="commentTop">
              <div class="commentLeft flexCenter">
                <div class="backG"></div>
                <div class="w100 h100 f18 zindex999">&nbsp;&nbsp;<span class="shenglue">嘉禾林区巡检</span>
                </div>
              </div>
            </div>
            <div class="commentMiddle">
              <div class="middleComment f14"><span>总里程：7903米</span> </div>
              <div class="middleComment f14"><span>执行时间：14分24秒</span> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { } from "vue";
</script>

<style lang="scss" scoped>
.Equipment {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;


  .ml23 {
    margin-left: 23px;
  }

  .mr47 {
    margin-right: 47px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .h100 {
    height: 100%;
  }

  .w100 {
    width: 100%;
  }

  .f12 {
    font-size: 12px;
  }

  .f14 {
    font-size: 14px;
  }

  .f16 {
    font-size: 16px;
  }

  .f18 {
    font-size: 18px;
  }

  .f20 {
    font-size: 20px;
  }

  .f24 {
    font-size: 24px;
  }

  .fwb {
    font-weight: bold;
  }

  .zindex999 {
    position: relative;
    z-index: 999;
  }

  .CommonImg {
    height: 100%;
  }

  .flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flexBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .EquipmentTitle {
    height: 40px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: end;
    font-size: 24px;
    color: #fff;

    .backG {
      width: 95%;
      height: 70px;
      position: absolute;
      background: url("@/assets/secondTitle/rightBg.svg") no-repeat center center;
      background-size: cover;
      background-size: 100% 100%;
      left: 20px;
      bottom: -25px;
      z-index: 9;
    }
  }

  .EquipmentContent {
    flex: 1;
    padding: 20px 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #fff;

    .eventBox {
      width: 33vh;
      height: 10vh;
      display: flex;

      .imgBox {
        width: 10vh;
        height: 100%;
        background: url("@/assets/secondTitle/rightBg2.svg") no-repeat center center;
        background-size: cover;
        background-size: 100% 100%;
        position: relative;

        img {
          height: 10vh;
          z-index: 9;
        }

        .imgText {
          width: 100%;
          height: 2.5vh;
          z-index: 999;
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          background: url("@/assets/secondTitle/imgText.svg") no-repeat center center;
          background-size: cover;
          background-size: 100% 100%;
        }
      }

      .mainBox {
        flex: 1;
        height: 100%;
        color: #fff;
        display: flex;

        .commentBox {
          flex: 1;
          height: 100%;
          margin-left: 20px;
          display: flex;
          flex-direction: column;

          .commentTop {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: start;
            align-items: center;

            .commentLeft {
              width: 100%;
              height: 100%;
              position: relative;

              .shenglue {
                width: 120px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .backG {
                width: 70%;
                height: 15px;
                position: absolute;
                left: 0;
                bottom: -0.3vh;
                z-index: 9;
                background: url("@/assets/secondTitle/titleBg.svg") no-repeat center center;
                background-size: cover;
                background-size: 100% 100%;
              }
            }

            .commentRight {
              width: 45%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .task {
                width: 36px;
                height: 36px;
                position: relative;

                .taskButtonTool {
                  width: 60px;
                  text-align: center;
                  position: absolute;
                  bottom: -15px;
                  left: -50%;
                  transform: translateX(5px);
                  color: #7AC7F8;
                }
              }
            }
          }

          .commentMiddle {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;

            .middleComment {
              width: 100%;
              height: 3.5vh;
              display: flex;
              justify-content: start;
              align-items: center;

              span {
                width: 11vw;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }

  }

  .redLinear {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 7px;
    z-index: 9;
    background: linear-gradient(90deg, #DD3E3E 0%, rgba(221, 62, 62, 0) 100%);
    border-radius: 0px 0px 0px 0px;
  }

  .blueLinear {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 7px;
    background: linear-gradient(86deg, #229FE7 0%, rgba(51, 161, 222, 0) 100%);
    border-radius: 0px 0px 0px 0px;
  }

  .greenLinear {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 7px;
    background: linear-gradient(90deg, #26BB2C 0%, rgba(38, 187, 44, 0) 100%);
    border-radius: 0px 0px 0px 0px;
  }

}
</style>
